<template>
	<view class='page_cont'>
		<view class='page' :class="[show_page?'left':'',show_page2?'left':'']" style="background: #F7F9FB">
		    <view class='check_list'>
				<view class='check_item' @click="nav_phone_show(1)">
					<view class='title'>手机验证码</view>
					<image class='icon' src="/static/icon43.png"></image>
				</view>
				<view class='check_item' @click="nav_word_show(2)">
					<view class='title'>原密码验证</view>
					<image class='icon' src="/static/icon43.png"></image>
				</view>
		    </view>
		</view>
		<view class='page' :class="[show_page?'':'right',show_page2?'left':'']" style="background: #fff">
			<view class='top_title'>通过手机短信验证码更换密码</view>
			<view class='box'>
			    <!-- <input class='input' maxlength="11" @input="input_mobile" placeholder="请输入手机号" placeholder-style="color:rgba(66,71,82,0.5);"></input> -->
				<view class="input">{{mobile}}</view>
			</view>
			<view class='box'>
			    <input class='input' maxlength="6" @input="input_code" placeholder="请输入验证码" placeholder-style="color:rgba(66,71,82,0.5);"></input>
				<view class="btn" @click="send_code()" v-if="show_btn">发送验证码</view>
				<view class='text' v-else>重新发送({{time}}s)</view>
			</view>
			<view class='send_btn' :style="{background:mobile&&code?'rgba(91,144,255,1)':'rgba(91,144,255,0.5)'}" @click="confirm_mobile()">确定</view>
		</view>
		<view class="page" :class="show_page2?'':'right'" style="background: #F7F9FB">
		    <view class='set_list'>
				<view class="set_item" v-if="set_index==2">
					<view class='title'>原密码</view>
					<input type='text' class='input' placeholder="请输入原密码" placeholder-style="color:rgba(66,71,82,0.5);" @input="input_old_passWord" maxlength="16"></input>
				</view>
				<view class="set_item">
					<view class='title'>新密码</view>
					<input type='text' class='input' placeholder="请输入新密码" placeholder-style="color:rgba(66,71,82,0.5);" @input="input_new_passWord" maxlength="16"></input>
				</view>
				<view class="set_item">
					<view class='title'>确认密码</view>
					<input type='text' class='input' placeholder="请再次输入新密码" placeholder-style="color:rgba(66,71,82,0.5);" @input="input_again_passWord" maxlength="16"></input>
				</view>
			</view>
		    <view class='ti_wrap'>
				<image class="icon" src="/static/icon52.png"></image>
				<view class='text'>密码需输入6-16位数字/字母</view>
		    </view>
		    <view class="con_btn" :style="{background:(mobile||old_password)&&new_password&&again_password?'rgba(91,144,255,1)':'rgba(91,144,255,0.5)'}" @click="confirm_password()">保存</view>
		</view>
	</view>
</template>

<script>
	import config from "../../api/config.js"
	import encryption from "../../utils/md5.js"
	import util from "../../utils/util.js"
	export default{
		data(){
			return {
				show_page: false,
				show_page2: false,
				set_index: '',
				mobile: '',
				code: '',
				show_btn: true,
				time: 59,
				old_password: '',
				new_password: '',
				again_password: '',
				userinfo: '',
			}
		},
		onLoad() {
			this.userinfo=uni.getStorageSync("userinfo");
			this.mobile=this.userinfo.phone;
		},
		methods:{
			// 手机验证码
			nav_phone_show(index){
				this.show_page=true;
				this.set_index=index;
			},
			// 原密码验证
			nav_word_show(index){
				this.show_page2=true;
				this.set_index=index;
			},
			// 手机号
			input_mobile(e){
				this.mobile=e.detail.value;
			},
			// 验证码
			input_code(e){
				this.code=e.detail.value;
			},
			// 发送验证码
			send_code(){
				if(!util.testMobile(this.mobile)||this.mobile==''){
					util.page_show_toast('手机号码输入有误',1500)
				}else{
					this.user_send_code();
				}
			},
			// 验证手机号
			confirm_mobile(){
				if(!util.testMobile(this.mobile)||this.mobile==''){
					util.page_show_toast('手机号码输入有误',1500)
					return false;
				}
				if(this.code==''){
					util.page_show_toast('验证码输入有误',1500)
					return false;
				}
				this.very_code();
			},
			// 原密码
			input_old_passWord(e){
				this.old_password=e.detail.value;
			},
			// 新密码
			input_new_passWord(e){
				this.new_password=e.detail.value;
			},
			// 确认密码
			input_again_passWord(e){
				this.again_password=e.detail.value;
			},
			// 修改
			confirm_password(){
				if(this.set_index==2){
					if(!this.old_password){
						util.page_show_toast('原密码未输入',1500)
						return false;
					}
					if(this.new_password == this.old_password){
						util.page_show_toast('新密码和原密码不能一样',1500)
						return false;
					}
				}
				if(!this.new_password){
					util.page_show_toast('新密码未输入',1500)
					return false;
				}
				if(this.new_password.length<6){
					util.page_show_toast('新密码长度不足',1500)
					return false;
				}
				if(!this.again_password){
					util.page_show_toast('确认密码未输入',1500)
					return false;
				}
				if(this.again_password.length<6){
					util.page_show_toast('确认密码长度不足',1500)
					return false;
				}
				if(this.new_password != this.again_password){
					util.page_show_toast('新密码和确认密码不一致',1500)
					return false;
				}
				if(this.set_index==1){
					this.set_password_bycode()
				}else{
					this.set_password_byold()
				}
			},
			// 发送验证码
			user_send_code(){
				var params={
					"phone": this.mobile
				}
				config.send_code(params).then(res=>{
					util.page_show_toast("验证码发送成功",1500);
					this.show_btn=false;
					var timer=setInterval(()=>{
						this.time--;
						if(this.time<=0){
							this.show_btn=true;
							this.time=59;
							clearInterval(timer)
						}
					},1000)
				})
			},
			// 验证手机验证码
			very_code(){
				var params={
					"phone": this.mobile,
					"code": this.code
				}
				config.very_code(params).then(res=>{
					this.show_page2=true;
				})
			},
			// 验证码设置密码
			set_password_bycode(){
				var params={
				      "phone": this.mobile,
				      "password": encryption.md5(this.new_password)
				    }
				config.set_password_bycode(params).then(res=>{
					util.page_show_toast("修改成功",1500);
					var login_info=uni.getStorageSync("login_info");
					if(login_info){
						login_info.password=this.new_password;
						uni.setStorageSync("login_info",login_info)
					}
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1
						})
					},1500)
				})
			},
			// 原密码设置密码
			set_password_byold(){
				var params={
					"id": this.userinfo.id,
					"phone": this.userinfo.phone,
					"oldPassword": encryption.md5(this.old_password),
					"password": encryption.md5(this.new_password)
				}
				config.set_password_byold(params).then(res=>{
					util.page_show_toast("修改成功",1500);
					var login_info=uni.getStorageSync("login_info");
					if(login_info){
						login_info.password=this.new_password;
						uni.setStorageSync("login_info",login_info)
					}
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1
						})
					},1500)
				})
			},
		},
	}
</script>

<style lang="scss">
	.page_cont{
		width: 100%;
		.page{
			position: fixed;
			/* #ifdef MP-WEIXIN */
			top: 0;
			/* #endif */
			/* #ifdef H5 */
			top: 44px;
			/* #endif */
			left: 0;
			width: 100%;
			height: 100%;
			padding: 32rpx;
			box-sizing: border-box;
			z-index: 999;
			transition: all 0.3s;
			.check_list{
				padding: 0 32rpx;
				background: #fff;
				border-radius: 16rpx;
				.check_item{
					padding: 36rpx 0;
					border-bottom: 2rpx solid #F7F9FB;
					display: flex;
					flex-direction: row;
					&:last-child{
						border-bottom: 0;
					}
					.title{
						flex: 1;
						height: 42rpx;
						font-size: 30rpx;
						font-weight:400;
						line-height: 42rpx;
						color:rgba(66,71,82,1);
						text-align: left;
					}
					.icon{
						width: 24rpx;
						height: 24rpx;
						margin-top: 10rpx;
					}
				}
			}
			.top_title{
				text-align: left;
				height: 40rpx;
				font-size: 28rpx;
				font-weight:400;
				line-height:40rpx;
				color:rgba(149,152,163,1);
			}
			.box{
				padding: 32rpx 32rpx 32rpx 44rpx;
				background: #F7F9FB;
				border-radius: 16rpx;
				display: flex;
				flex-direction: row;
				margin: 24rpx 0 48rpx 0;
				.input{
					flex: 1;
					text-align: left;
					min-height: 36rpx;
					height: 42rpx;
					font-size: 30rpx;
					font-weight:400;
					line-height: 42rpx;
					color:rgba(66,71,82,1);
				}
				.btn{
					height: 42rpx;
					font-size: 30rpx;
					font-weight:400;
					line-height: 42rpx;
					color: #5B90FF;
				}
				.text{
					height: 42rpx;
					font-size: 30rpx;
					font-weight:400;
					line-height: 42rpx;
					color: rgba(91,144,255,0.5);
				}
			}
			.send_btn{
				margin-top: 100rpx;
				height: 104rpx;
				line-height: 104rpx;
				text-align: center;
				font-size: 36rpx;
				border-radius: 16rpx;
				font-weight:600;
				color: #fff;
				letter-spacing:4rpx;
			}
			.set_list{
				padding: 0 32rpx;
				background: #fff;
				border-radius: 16rpx;
				.set_item{
					padding: 36rpx 0;
					border-bottom: 2rpx solid #F7F9FB;
					display: flex;
					flex-direction: row;
					// &:last-child{
					// 	border-bottom: 0;
					// }
					.title{
						width: 122rpx;
						text-align: left;
						height: 42rpx;
						min-height: 42rpx;
						font-size: 30rpx;
						font-weight: 400;
						line-height: 42rpx;
						color:rgba(66,71,82,1);
						margin-right: 32rpx;
					}
					.input{
						flex: 1;
						height: 42rpx;
						min-height: 42rpx;
						font-size: 30rpx;
						font-weight: 400;
						line-height: 42rpx;
						color:rgba(66,71,82,1);
					}
				}
			}
			.ti_wrap{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin: 32rpx 0 48rpx 0;
				.icon{
				  width: 28rpx;
				  height: 28rpx;
				  margin-right: 16rpx;
				}
				.text{
				  flex: 1;
				  height: 34rpx;
				  font-size: 24rpx;
				  font-weight:400;
				  line-height: 34rpx;
				  color: #9598A3;
				}
			}
			.con_btn{
			  height: 88rpx;
			  line-height: 88rpx;
			  text-align: center;
			  font-size: 36rpx;
			  border-radius: 16rpx;
			  font-weight:600;
			  color: #fff;
			  letter-spacing:10rpx;
			}
		}
		.left{
			left: -100%;
		}
		.right{
			left: 100%;
		}
	}
</style>
